<template>
  <el-card class="box-card">
    <el-table :data="page.rows" highlight-current-row stripe>
      <el-table-column label="图片">
        <template scope="scope">
          <img class="min-poster" :src="formatterPicUrl(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="position" label="排序" width="80px"></el-table-column>
      <el-table-column prop="bannerTypeText" label="类型"></el-table-column>
      <el-table-column width="280px" label="商品名称/新闻地址" :formatter="formatTypeDescription"></el-table-column>
      <el-table-column prop="cityName" label="城市"></el-table-column>
      <el-table-column prop="dealerName" label="大B" :formatter="formatDealerName"></el-table-column>
      <el-table-column prop="avaliable" label="是否启用" :formatter="formatterAvaliable"></el-table-column>
      <el-table-column label="操作" width="80">
        <template scope="scope">
          <el-button icon="edit" v-if="hasEditPermission" type="primary" size="mini" @click="handleEdit(scope.row)" title="编辑"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24" class="toolPage">
      <span>
      <el-button @click="handleCreateNews" type="info">添加新闻</el-button>
      <el-button @click="handleCreateProduct" type="info">添加商品</el-button>
      <el-button @click="handleCreateBigB" type="info">添加大B</el-button>
    </span>
    </el-col>
  </el-card>
</template>

<style>
  .min-poster {
    width: auto;
    max-width: 45px;
    max-height: 45px;
    margin: 10px;
  }
</style>
<script>
  import * as Auth from 'common/auth'

  import Config from 'common/config'

  export default {
    created() {
      this.load()
    },
    data() {
      return {
        editData: {
          Picture: '',
          Sort: '',
          Type: '',
          ProductName_news: '',
          Citys: '',
          BigBoss: '',
          Start_End: ''
        },
        page: {
          rows: []
        }
      }
    },
    computed: {
        hasAddPermission: () => Auth.hasPermission('home_banners:add'),
        hasEditPermission: () => Auth.hasPermission('home_banners:edit')
    },
    methods: {
      load() {
        this.axios.get("/home_banners", {}).then(response => { this.page = response.data })
      },
      handleEdit(row) {
        this.$router.push(`/home_banners/${row.id}/edit`)
      },
      handleCreateNews() {
        this.$router.push(`home_banners/new/news/banner_type`)
      },
      handleCreateProduct() {
        this.$router.push(`stock_items`)
      },
      handleCreateBigB() {
        this.$router.push(`users`)
      },
      handleDelete(row) {
        this.$confirm('确认删除此信息吗?', '提示', {}).then(() => {
          this.axios.delete(`/version_infos/${row.id}`).then(() => { this.load() })
        })
      },
      formatDealerName(row, column) {
        return !!row.dealerName ? row.dealerName : "-"
      },
      formatterAvaliable(row, column) {
        return row.available ? "是" : "否"
      },
      formatTypeDescription(row, column) {
        return row.bannerType === "products" ? row.productName
                : row.bannerType === "news" ? row.newsUrl
                : row.dealerName
      },
      formatterPicUrl(row) {
        return Config.assets_url_prefix + row.pictureUrl
      }
    }
  }

</script>